<!DOCTYPE html>
<html lang="zh-cn">
<%#
    模板数据
    data = {
        // 页面类型
        "type": 0, // 0-H5 1-PC

        // 初始化参数
        "opts": {},

        // 页面大小
        "width": 640,
        "height": 2645,

        // 页面背景色
        "backgroundColor": "#f3e3f7",

        // PC页背景图
        "backgroundImage": {
            "width": 960,
            "height": 960,
            "index": "bg",
            "data": {
                "src": "……H7q6I//9k="
            }
        },

        // 分割出来的图片元素
        "list": [

            // 独立图片元素
            {
                "top": 2376,
                "bottom": 2543,
                "left": 48,
                "right": 591,
                "width": 544,
                "height": 168,
                "index": 11,

                // 图像数据，根据分辨率会可能会生成 320、640、原始大小 三种
                "data": {
                    "320": "……3M7N9z/9k=",
                    "src": "……H7q6I//9k="
                }
            },

            // 雪碧图类型
            {
                "width": 512,
                "height": 48,

                // 雪碧图中每个子图像元素定位
                "list": [
                    {
                        "left": 8,
                        "top": 8,
                        "originalLeft": 240,
                        "originalTop": 2584,
                        "width": 160,
                        "height": 32
                    },
                    {
                        "left": 176,
                        "top": 8,
                        "originalLeft": 160,
                        "originalTop": 1032,
                        "width": 328,
                        "height": 24
                    }
                ],
                "backgroundColor": "#f3e3f7",
                "index": 12,
                "data": {
                    "320": "……AP/Z",
                    "src": "……D/2Q=="
                }
            }
        ]
    }
%>
<%
    var opts = data.opts || {};
    var pageWidth = data.width || 384;
    var css = [];
    css.push(`html,body,.bgwrap{width:100%;margin:0;background-color:${data.backgroundColor}}`);
    css.push(`.bglist{width:${pageWidth}px}`);
    css.push('.bgimg{position:absolute;background-repeat:no-repeat}');
    if (data.list && data.list.forEach) {
        data.list.forEach(function(item) {
            css.push(
                `.bg-${item.index}{` +
                    `width:${item.width}px;` +
                    `height:${item.height}px;` +
                    `left:${item.left || 0}px;` +
                    `top:${item.top || 0}px;` +
                    `background-image:url(${item.data.src});` +
                '}'
            );
            if (item.list && item.list.forEach) {
                item.list.forEach(function(sub, subIndex) {
                    css.push(
                        `.bg-${item.index}-${subIndex}{` +
                            `width:${sub.width}px;` +
                            `height:${sub.height}px;` +
                            `left:${sub.originalLeft}px;` +
                            `top:${sub.originalTop}px;` +
                            `background-position:-${sub.left || 0}px -${sub.top || 0}px;` +
                        '}'
                    );
                });
            }
        });

        for (var i = 3; i > 0; i--) {
            var w = i * 320;
            if (data.width > w) {
                var _sub = [];
                data.list.forEach(function(item) {
                    if (item.data[w]) {
                        _sub.push(`.bg-${item.index}{background-image:url(${item.data[w]})}`);
                    }
                });
                if (_sub.length) {
                    css.push(`@media (max-width: ${w}px) {${_sub.join('')}}`);
                }
            }
        }
    }
    var bgDom;
    if (data.type == 1) {
        css.push(`.bgwrap{position:relative;width:${pageWidth}px;margin:0 auto}`);
        var bgimg = data.backgroundImage || {};
        var bgtype = parseInt((data.opts && data.opts.bgtype) || 0);
        var background = [];
        if (bgimg.data && bgimg.data.src) {
            background.push(`background:url(${bgimg.data.src}) no-repeat 50% 0`);
        }
        if (bgtype & 1) {
            bgDom = 1;
        }
        if (bgtype & 2) {
            background.push('background-repeat-y:repeat');
        }
        if (bgtype & 3) {
            background.push('background-size:cover');
        }
        if (opts.bgcolor) {
            background.push(`background-color:${opts.bgcolor}`);
        }
        if (background.length) {
            css.push(`${bgDom ? '.bgcover' : 'body'}{${background.join(';')}}`);
            if (bgDom) {
                css.push('.bgcover{position:fixed;top:0;bottom:0;left:0;right:0}');
            }
        }
    } else {
        css.push('.bglist{transform-origin:0 0}');
    }
%>
<head>
<meta charset="utf-8">
<title>自动切图DEMO</title>
<% if (data.type != 1) { %>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0" />
<% if (opts.zoomType == 1) { %>
<script>
    ;(function(){
        var width = <%- pageWidth %>, s = 1;
        var viewport = document.querySelector('meta[name="viewport"]');
        function update() {
            var ts = window.innerWidth * s / width;
            if (s !== ts) {
                viewport.setAttribute('content', 'width=device-width,initial-scale=' + (s = ts) + ',maximum-scale=1,user-scalable=0');
            }
        }
        window.addEventListener('resize', update);
        update();
    })();
</script>
<% } %>
<% } %>
<meta name="format-detection" content="telephone=no">
<meta http-equiv="Content-Language" content="zh-cn" />
<meta name="author" content="Tencent-ISUX-Music" />
<meta name="Copyright" content="Tencent" />
<meta name="description" content="QQ音乐" />
<meta name="keywords" content="QQ音乐" />
<meta name="applicable-device" content="mobile">
<style>
<%- css.join("\n") %>
</style>
</head>

<body>

<% if (bgDom) { %>
<div class="bgcover"></div>
<% } %>

<!--背景列表-->
<div class="bgwrap">
    <div class="bglist">
        <% if (data.list) { %>
            <% data.list.forEach(function(item, index){ %>
                <% if (item.list) { %>
                    <% item.list.forEach(function(sub, subIndex){ %>
                        <div class="bgimg bg-<%- index %> bg-<%- index %>-<%- subIndex %>"></div>
                    <% }) %>
                <% } else { %>
                    <div class="bgimg bg-<%- index %>"></div>
                <% } %>
            <% }) %>
        <% } %>
    </div>
</div>

<% if (data.type != 1 && opts.zoomType != 1) { %>
<!--自动调节背景缩放-->
<script>
    ;(function(){
        var bglist = document.querySelector(".bglist"),
            width = <%- pageWidth %>,
            curWidth = window.innerWidth,
            s = 1;
        if (width > 0) {
            s = curWidth / width;
            if (s != 1) {
                bglist.style.zoom = s;
            }
        } else {
            width = curWidth;
            bglist.style.width = width + "px";
        }
        window.addEventListener("resize", function(){
            s = window.innerWidth / width;
            bglist.style.zoom = s;
        });
    })();
</script>
<% } %>

</body>
</html>